<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 收藏分类
const categories = ref(['全部收藏', '爱情鲜花', '生日鲜花', '礼品花篮']);
const activeCategory = ref('全部收藏');

// 收藏商品数据
const favoriteItems = ref([
  {
    id: 1,
    name: '浪漫红玫瑰花束',
    description: '11朵精选昆明玫瑰',
    price: 199,
    image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    category: '爱情鲜花'
  },
  {
    id: 2,
    name: '阳光向日葵花束',
    description: '9朵向日葵主花',
    price: 229,
    image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    category: '生日鲜花'
  },
  {
    id: 3,
    name: '彩色郁金香花束',
    description: '进口郁金香多色搭配',
    price: 289,
    image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    category: '生日鲜花'
  },
  {
    id: 4,
    name: '纯净白色满天星花束',
    description: '满天星配叶尤加利',
    price: 199,
    image: 'https://images.unsplash.com/photo-1586376259976-6471178d2e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    category: '爱情鲜花'
  },
  {
    id: 5,
    name: '纯洁白百合花束',
    description: '5朵东方百合',
    price: 329,
    image: 'https://images.unsplash.com/photo-1584589167171-541ce45f1eea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    category: '礼品花篮'
  }
]);

// 组件挂载时初始化
onMounted(() => {
  userStore.initializeAuth();
});

// 方法
const selectCategory = (category: string) => {
  activeCategory.value = category;
};

const removeFavorite = (itemId: number) => {
  favoriteItems.value = favoriteItems.value.filter(item => item.id !== itemId);
};

const addToCart = (item: any) => {
  console.log('添加到购物车:', item);
  // 添加到购物车逻辑
};

const viewProduct = (itemId: number) => {
  router.push(`/product-detail?id=${itemId}`);
};

// 过滤收藏商品
const filteredItems = ref([]);
const updateFilteredItems = () => {
  if (activeCategory.value === '全部收藏') {
    filteredItems.value = favoriteItems.value;
  } else {
    filteredItems.value = favoriteItems.value.filter(item => item.category === activeCategory.value);
  }
};

// 监听分类变化
const watchCategory = () => {
  updateFilteredItems();
};

// 初始化过滤
updateFilteredItems();

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>
          
          <!-- 未登录状态 -->
          <template v-if="!userStore.checkIsLoggedIn">
            <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
            <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
          </template>
          
          <!-- 已登录状态 -->
          <template v-else>
            <div class="hidden md:flex items-center space-x-3">
              <div class="flex items-center space-x-2">
                <img 
                  :src="userStore.getUserAvatar" 
                  :alt="userStore.getDisplayName"
                  class="w-8 h-8 rounded-full object-cover"
                >
                <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
              </div>
              <div class="relative group">
                <button class="text-gray-600 hover:text-rose-500">
                  <font-awesome-icon icon="chevron-down" class="text-sm" />
                </button>
                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                  <a @click.prevent="router.push('/user-center')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                  <a @click.prevent="router.push('/order-detail')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                  <a @click.prevent="router.push('/favorites')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的收藏</a>
                  <div class="border-t border-gray-100"></div>
                  <a @click.prevent="handleLogout" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
      <div class="md:flex md:gap-6">
        <!-- 左侧导航 -->
        <div class="md:w-1/4 lg:w-1/5 mb-6 md:mb-0">
          <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 用户信息 -->
            <div class="p-4 text-center border-b border-gray-100">
              <img 
                :src="userStore.getUserAvatar" 
                :alt="userStore.getDisplayName" 
                class="w-20 h-20 rounded-full mx-auto mb-3"
              >
              <h2 class="font-bold text-lg text-gray-800">{{ userStore.getDisplayName }}</h2>
              <p class="text-gray-500 text-sm">普通会员</p>
            </div>

            <!-- 导航菜单 -->
            <nav class="p-2">
              <a @click.prevent="router.push('/user-center')" href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                <font-awesome-icon icon="user-circle" class="w-5 text-center mr-2" />
                <span>个人信息</span>
              </a>
              <a @click.prevent="router.push('/order-detail')" href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                <font-awesome-icon icon="clipboard-list" class="w-5 text-center mr-2" />
                <span>我的订单</span>
              </a>
              <a @click.prevent="router.push('/address')" href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                <font-awesome-icon icon="map-marker-alt" class="w-5 text-center mr-2" />
                <span>收货地址</span>
              </a>
              <a @click.prevent="router.push('/favorites')" href="#" class="flex items-center p-3 rounded-lg bg-rose-50 text-rose-500">
                <font-awesome-icon icon="heart" class="w-5 text-center mr-2" />
                <span>我的收藏</span>
              </a>
              <a @click.prevent="router.push('/review')" href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                <font-awesome-icon icon="comment-alt" class="w-5 text-center mr-2" />
                <span>我的评价</span>
              </a>
              <a @click.prevent="router.push('/user-center')" href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-50">
                <font-awesome-icon icon="cog" class="w-5 text-center mr-2" />
                <span>账号设置</span>
              </a>
            </nav>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="md:w-3/4 lg:w-4/5">
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-bold mb-4 pb-2 border-b border-gray-100 text-gray-800">我的收藏</h2>
            
            <!-- 收藏夹分类 -->
            <div class="mb-6">
              <div class="flex space-x-4 border-b border-gray-100">
                <button 
                  v-for="category in categories" 
                  :key="category"
                  @click="selectCategory(category); watchCategory()"
                  :class="[
                    'pb-3 px-2 font-medium',
                    activeCategory === category 
                      ? 'border-b-2 border-rose-500 text-rose-500' 
                      : 'text-gray-500 hover:text-gray-700'
                  ]"
                >
                  {{ category }}
                </button>
              </div>
            </div>

            <!-- 收藏列表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
              <div 
                v-for="item in filteredItems" 
                :key="item.id"
                class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition duration-300"
              >
                <div class="relative">
                  <img 
                    :src="item.image" 
                    :alt="item.name" 
                    class="w-full h-48 object-cover cursor-pointer"
                    @click="viewProduct(item.id)"
                  >
                  <button 
                    @click="removeFavorite(item.id)"
                    class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white bg-opacity-70 flex items-center justify-center text-rose-500 hover:bg-opacity-100"
                  >
                    <font-awesome-icon icon="heart" />
                  </button>
                </div>
                <div class="p-3">
                  <h3 class="font-medium truncate text-gray-800">{{ item.name }}</h3>
                  <p class="text-sm text-gray-500 mt-1">{{ item.description }}</p>
                  <div class="flex justify-between items-center mt-2">
                    <span class="text-rose-500 font-bold">¥{{ item.price }}</span>
                    <div class="flex space-x-2">
                      <button 
                        @click="addToCart(item)"
                        class="px-3 py-1 bg-rose-500 text-white rounded-md text-sm hover:bg-rose-600"
                      >
                        加入购物车
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-if="filteredItems.length === 0" class="text-center py-12">
              <font-awesome-icon icon="heart" class="text-6xl text-gray-300 mb-4" />
              <p class="text-gray-500 text-lg">暂无收藏商品</p>
              <p class="text-gray-400 text-sm mt-2">快去挑选心仪的鲜花吧</p>
              <button 
                @click="router.push('/categories')"
                class="mt-4 px-6 py-2 bg-rose-500 text-white rounded-md hover:bg-rose-600"
              >
                去逛逛
              </button>
            </div>

            <!-- 分页 -->
            <div v-if="filteredItems.length > 0" class="flex justify-center mt-8">
              <div class="flex items-center space-x-1">
                <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
                  <font-awesome-icon icon="angle-left" />
                </a>
                <a href="#" class="px-3 py-1 rounded bg-rose-500 text-white">1</a>
                <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">2</a>
                <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
                  <font-awesome-icon icon="angle-right" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a @click.prevent="router.push('/')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
